<d-row [dFlex]="1" [dFlexContainer]="'column'" [dAlign]="'stretch'" [dGutter]="[0,8]" [dStyle]="{'height':'100%'}">
  <d-col>
    <d-alert type="info" [closeable]="false" [showIcon]="false">
      牛客网JavaScript V8模拟环境，提供<code>readline()</code>和<code>print()</code>接口
    </d-alert>
  </d-col>
  <d-col [dFlexContainer]="'row'" [dJustify]="'between'">
    <d-row [dFlex]="0.64" [dAlign]="'center'" [dJustify]="'between'" style="flex-wrap:nowarp;">
      <d-col [dFlex]="0.5">
        <d-select [width]="180" [allowClear]="true" [isSearch]="true" placeholder="请选择题目" filterKey="name"
          [options]="tests" [(ngModel)]="test" (valueChange)="selectTest($event)"
          [extraConfig]="{ selectedItemWithTemplate:{enable:true} }">
          <ng-template let-option="option" let-filterKey="filterKey">
            {{ option[filterKey] }}
            <d-tag *ngIf="option.diff" [tag]="difficulty[option.diff-1].title"
              [customColor]="difficulty[option.diff-1].color">
            </d-tag>
          </ng-template>
        </d-select>
      </d-col>
      <d-col [dSpace]="[0,8]">
        <span>
          <d-button *ngIf="test?.link" bsStyle="text" (btnClick)="goToLink(test.link)">跳转原题</d-button>
        </span>
        <d-button bsStyle="primary" (btnClick)="setCode(template)">代码模板</d-button>
        <d-button bsStyle="common" (btnClick)="setCode()">清空代码</d-button>
      </d-col>
    </d-row>
    <d-row [dFlex]="0.34" [dAlign]="'center'" [dJustify]="'between'">
      <d-col [dFlex]="0.5">
        <d-select [allowClear]="true" [isSearch]="true" placeholder="请选择示例" filterKey="name" [options]="demos"
          [(ngModel)]="demo" (valueChange)="selectDemo($event)">
        </d-select>
      </d-col>
      <d-col>
        超时限制（毫秒）: <d-input-number [(ngModel)]="timeout"></d-input-number>
      </d-col>
    </d-row>
  </d-col>
  <d-col [dFlex]="1">
    <d-row [dFlex]="1" [dFlexContainer]="'row'" [dJustify]="'between'" [dStyle]="{'height':'100%'}">
      <d-col [dFlex]="0.64">
        <textarea dTextarea spellcheck="false" placeholder="测试代码" [(ngModel)]="code"></textarea>
      </d-col>
      <d-col [dFlex]="0.34" [dFlexContainer]="'column'" [dSpace]="[8,0]">
        <d-row [dFlex]="0.5">
          <textarea dTextarea spellcheck="false" placeholder="输入用例" [(ngModel)]="input"></textarea>
        </d-row>
        <d-row [dAlign]="'center'" [dJustify]="'between'">
          <d-button bsStyle="primary" (btnClick)="runCode()">执行代码</d-button>
          <d-button bsStyle="common" (btnClick)="setInput()">清空输入</d-button>
        </d-row>
        <d-row [dFlex]="0.5" [dFlexContainer]="'row'" [dSpace]="[0,8]">
          <d-col [dFlex]="0.5">
            <textarea dTextarea spellcheck="false" placeholder="预计输出结果" [(ngModel)]="output"></textarea>
          </d-col>
          <d-col [dFlex]="0.5">
            <textarea dTextarea readonly spellcheck="false" placeholder="实际输出结果" [(ngModel)]="result"
              [error]="!!result&&result!==output">
            </textarea>
          </d-col>
        </d-row>
      </d-col>
    </d-row>
  </d-col>
</d-row>
